<template>
  <div class="app-container d-flex">
    <div class="h-100 w-8">
      <!-- 宿舍区1号楼 每层实时负载 -->
      <div class="h-2 w-100 d-flex">
        <div class="h-100 width-25 p10" v-for="(item,index) in oneCarData" :key="index">
          <div class="h-100 w-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">{{oneCarDataTitle[index].name}}</div>
              </div>
            </div>
            <div class="item_content">
              <div class="w-100 h-100">
                <div class="d-flex-center h-50 pt-2">
                  <div class="font-white-impact font-48 mr-2">{{$formatNumber(item.deviceValue)}}</div>
                  <div class="font-blue font-14 mt-3">kW</div>
                </div>
                <div class="d-flex-center h-50">
                  <el-image class="image_size" :src="oneCarDataTitle[index].imgUrl" fit="cover"></el-image>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <!-- 宿舍区 功率信息 -->
      <div class="h-4 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title2">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区功率信息</div>
            </div>
          </div>
          <div class="item_content2">
            <div class="h-100 w-100 pt-3" id="bar_one"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-100 w-4">
      <!-- 宿舍区 总功率排名分布 -->
      <div class="h-3 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title2">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区总功率排名分布</div>
            </div>
          </div>
          <div class="item_content2">
            <div class="h-100 w-100 d-flex flex-column justify-content-between pt-3 pb-2">
              <div class="d-flex align-items-center" v-for="(item,index) in threeCardData" :key="index">
                <div class="width-15 d-flex align-items-center font-white">
                  <div class="border_three p-1 mr-2">#{{index + 1}}</div>
                  <div>{{item.xValue}}</div>
                </div>
                <div class="width-80">
                  <el-progress color="#07C160" :percentage="setItemProgress(item)"
                               :format="format(item)"></el-progress>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 宿舍区功率分类占比 -->
      <div class="h-3 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title2">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区功率分类占比</div>
            </div>
          </div>
          <div class="item_content2">
            <div class="h-100 w-100 pt-3" id="pie_one"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryOneListLoadByNum,
    queryTwoListLoadByReport,
    queryThreeListLoadByReport,
    queryFourListLoadByReport,
  } from "@/api/headmaster/loadAnalysis"

  export default {
    components: {},
    data() {
      return {
        timeout: [],

        oneCarData: [],
        oneCarDataTitle: [
          {name: '宿舍区总功率', imgUrl: require('@/assets/img/line1.png')},
          {name: '1号楼总功率', imgUrl: require('@/assets/img/line2.png')},
          {name: '2号楼总功率', imgUrl: require('@/assets/img/line3.png')},
          {name: '3号楼总功率', imgUrl: require('@/assets/img/line4.png')},
        ],

        twoCardData: {
          xData: [],
          seriesData: [],
        },
        threeCardData: [],
        fourCarData: []
      }
    },
    created() {
    },
    mounted() {
      this.queryOneListLoadByNum()
      this.queryTwoListLoadByReport()
      this.queryThreeListLoadByReport()
      this.queryFourListLoadByReport()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListLoadByNum()
        _this.queryTwoListLoadByReport()
        _this.queryThreeListLoadByReport()
        _this.queryFourListLoadByReport()
      }, 30000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneListLoadByNum() {
        queryOneListLoadByNum().then(res => {
          let tempData = res.object || []
          let obj = {
            airTmp: null,
            deviceCode: null,
            deviceTitle: null,
            deviceUnit: null,
            deviceValue: "0.0",
            errorStatus: null,
            openStatus: null,
            socketColor: null,
            warnStatus: null
          }
          obj.deviceValue = (Number(tempData[0].deviceValue) + Number(tempData[1].deviceValue) + Number(tempData[2].deviceValue)) == 0?
            '0.0':(this.$formatNumber(tempData[0].deviceValue) + this.$formatNumber(tempData[1].deviceValue) + this.$formatNumber(tempData[2].deviceValue)).toFixed(2)

          tempData.unshift(obj)
          this.oneCarData = tempData
        })
      },

      queryTwoListLoadByReport() {
        queryTwoListLoadByReport().then(res => {
          let tempData = res.object

          let xData = []
          let seriesData = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)

            let arr = tempData[i].yValue.split(',')
            seriesData.push(this.$formatNumber(arr[0]))
          }

          this.twoCardData.xData = xData
          this.twoCardData.seriesData = seriesData

          charts.barEchartOne('bar_one', this.twoCardData)
        })
      },

      queryThreeListLoadByReport() {
        queryThreeListLoadByReport().then(res => {
          let tempData = res.object || []
          this.threeCardData = tempData
        })
      },
      setItemProgress(data) {
        if (this.$formatNumber(data.yValue)==0) {
          return 0
        } else {
          return this.$formatNumber(data.percent)
        }
      },

      format(percentage) {
        return () => {
          return this.$formatNumber(percentage.yValue) + ' kW'
        }
      },
      queryFourListLoadByReport() {
        queryFourListLoadByReport().then(res => {
          let tempData = res.object || []

          let tempData2 = []
          for (let i = 0; i < tempData.length; i++) {
            tempData2.push({
              value: this.$formatNumber(tempData[i].yValue),
              name: tempData[i].xValue,
            })
          }
          this.fourCarData = tempData2

          charts.pieEchart('pie_one', this.fourCarData)
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .width-80 {
    width: 80%;
  }

  .width-25 {
    width: 25%;
  }

  .width-15 {
    width: 18%;
  }

  ::v-deep .el-progress-bar {
    width: 90%;
  }

  ::v-deep .el-progress__text {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff !important;
  }

  .border_three {
    background: rgba(12, 93, 88, 0.87);
    border: 1px solid #07c160;
  }

  .image_size {
    width: calc(100% - 0px);
    height: 88px;
  }

  .font-48 {
    font-size: 48px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .font-blue {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #6CA7B4;
  }

  .font-white-impact {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
  }
</style>
